// ------------------------------ 获取分类并渲染 --------------------------
function renderCategory() {
  $.ajax({
    url: '/my/category/list',
    success: function (res) {
      if (res.status === 0) {
        console.log(res);
        let str = '';
        res.data.forEach(item => {
          str += `
          <tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
              <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
              <button data-id="${item.id}" type="button" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
            </td>
          </tr>
          `;
        })
        // 把str放到tbody中
        $('tbody').html(str);
      }
    }
  });
}

renderCategory();


// ------------------------------ 添加类别 -------------------------------
let addIndex;
$('button:contains("添加类别")').on('click', function () {
  addIndex = layer.open({
    type: 1,
    title: '添加类别',
    content: $('#tpl-add').html(),
    area: ['500px', '250px']
  });
})

// 因为表单是动态创建的，所以需要使用事件委托的方案
$('body').on('submit', '#add-form', function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  $.ajax({
    type: 'POST',
    url: '/my/category/add',
    data: data,
    success: function (res) {
      if (res.status === 0) {
        layer.msg(res.message);
        renderCategory();
        // 关闭弹层
        layer.close(addIndex);
      }
    }
  });
})



// ------------------------------ 编辑类别 -------------------------------
let editIndex;
$('tbody').on('click', 'button:contains("编辑")', function () {
  // 能否获取事件源的三个自定义属性
  let shuju = $(this).data(); // 不给data()传参，将获取全部 data-xxx 属性值
  // console.log(shuju); // {alias: "art", name: "艺术", id: 50}
  editIndex = layer.open({
    type: 1,
    title: '修改类别',
    content: $('#tpl-edit').html(),
    area: ['500px', '250px']
  });
  // 做数据回填
  $('#edit-form input[name=name]').val(shuju.name);
  $('#edit-form input[name=alias]').val(shuju.alias);
  $('#edit-form input[name=id]').val(shuju.id);
})


// 表单提交，阻止默认行为，收集数据，ajax提交
$('body').on('submit', '#edit-form', function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  // console.log(data); // name=aaa&alias=bbb&id=2
  $.ajax({
    url: '/my/category/update',
    type: 'POST',
    data: data,
    success: function (res) {
      layer.msg(res.message);
      renderCategory();
      layer.close(editIndex);
    }
  });
})